/**
 * Created by zhulingxiao on 2017/6/7.
 */
import React from 'react';

import {Icon, Popconfirm, Modal, Input, Form, Button, Avatar} from 'antd';

const FormItem = Form.Item;
//自定义组件
import Table from '../../components/Table';
import style from './index.css'
// import UpdateModal from '../../components/updateModal';

export default class User extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            modalKey: '',//设置随机key销毁modal,
            visible: false,
            addMenu: {},
            isSecond: true,
            modalName: '',
            data: [],
            initData: this.props.userList,
            filterDropdownVisible: false,
            searchText: '',
            filtered: false,

        }
    }

    onInputChange = (e) => {
        this.setState({searchText: e.target.value});
    };
    onSearch = () => {

        const {searchText} = this.state;
        const reg = new RegExp(searchText, 'gi');
        this.setState({
            filterDropdownVisible: false,
            filtered: !!searchText,
            data: this.state.initData.map((record) => {
                const match = record.nickname.match(reg);
                if (!match) {
                    return null;
                }
                return {
                    ...record,
                    nickname: (
                        <span>
                          {record.nickname.split(reg).map((text, i) => (
                              i > 0 ? [<span className="highlight" style={{color: 'red'}}>{match[0]}</span>, text] : text
                          ))}
                        </span>
                    ),
                };
            }).filter(record => !!record),
        });
    };

    componentDidMount() {

        this.props.onFetch(this.sub);

    }
    sub=(data)=>{
        this.setState({
            initData:data.data,
            data:data.data
        })
    };


    render() {

        const columns = [{
            title: '头像',
            dataIndex: 'avatarUrl',
            key: 'avatarUrl',
            render: text => <Avatar src={text}/>,
        }, {
            title: '昵称',
            dataIndex: 'nickname',
            key: 'nickname',
            filterDropdown: (
                <div className={style.customFilterDropdown}>
                    <Input
                        ref={ele => this.searchInput = ele}
                        placeholder="搜索"
                        value={this.state.searchText}
                        onChange={this.onInputChange}
                        onPressEnter={this.onSearch}
                    />
                    <Button type="primary" onClick={this.onSearch}>Search</Button>
                </div>
            ),
            filterIcon: <Icon type="search" style={{color: this.state.filtered ? '#108ee9' : '#aaa'}}/>,
            filterDropdownVisible: this.state.filterDropdownVisible,
            onFilterDropdownVisibleChange: (visible) => {
                this.setState({
                    filterDropdownVisible: visible,
                }, () => this.searchInput.focus());
            }
        }, {
            title: '性别',
            dataIndex: 'gender',
            key: 'gender',
            render: (text) => (
                text === 1 ? '男' : '女'
            )
        }, {
            title: '添加时间',
            dataIndex: 'CreatTime',
            key: 'CreatTime'
        }, {
            title: '操作',
            key: 'action',
            render: (text, record) => (
                <span>
          <a>编辑</a>
          <a style={{paddingLeft: 20}}>删除</a>
        </span>
            ),
        }];

        return (

            <div>

                <Table rowKey={record => record.SysID} data={this.state.data} columns={columns} pagination={true} loading={this.props.tableLoading}/>

            </div>

        )

    }

}
